import React, {useState,useEffect} from 'react';
import { getBannerList, delBanner } from '../../api/banner';
import { Table, Button, Image, Popconfirm } from 'antd';
const Index = () => {

  const [bannerList,setBannerList] = useState([])

  useEffect(()=>{
    getBannerList().then(res => {
      // console.log(res);
      setBannerList(res.data)
    })
  }, [])

  const columns = [
    {
      title: '序号',
      dataIndex: 'bannerid',
      render(t,r,i){
        return <span>{i + 1}</span>
      }
    },{
      title: '链接',
      dataIndex: 'link'
    },{
      title: '图片地址',
      dataIndex: 'img',
      render(t,r){
        return <Image src={t} alt={r.alt} height={60} />
      }
    },{
      title: '提示',
      dataIndex: 'alt'
    },{
      title: '操作',
      render(t,r,i){

        return (<Popconfirm
          title="你确定要删除吗？"
          onConfirm={()=>{
            delBanner({
              bannerid:r.bannerid
            }).then(res => {
              getBannerList().then(res => {
                setBannerList(res.data)
              })
            })
          }}
          okText="确定"
          cancelText="取消"
        >
          <Button danger>删除</Button>
        </Popconfirm>)

      }
    }
  ]

  return (
    <div>
      <Table
        dataSource={bannerList}
        columns={columns}
        rowKey={'bannerid'}
        scroll={{
          y: 430
        }}
      />
    </div>
  );
};

export default Index;
